<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <text class="iconfont icon-search"></text>
      <input type="text" placeholder="搜索酒店" v-model="searchKey" />
    </view>

    <!-- 筛选条件 -->
    <view class="filter-bar">
      <view class="filter-item" @tap="showFilter('area')">
        <text>区域</text>
        <text class="iconfont icon-arrow-down"></text>
      </view>
      <view class="filter-item" @tap="showFilter('price')">
        <text>价格</text>
        <text class="iconfont icon-arrow-down"></text>
      </view>
      <view class="filter-item" @tap="showFilter('star')">
        <text>星级</text>
        <text class="iconfont icon-arrow-down"></text>
      </view>
      <view class="filter-item" @tap="showFilter('more')">
        <text>更多</text>
        <text class="iconfont icon-arrow-down"></text>
      </view>
    </view>

    <!-- 酒店列表 -->
    <view class="hotel-list">
      <view class="hotel-item" v-for="(hotel, index) in hotels" :key="index" @tap="goToDetail(hotel)">
        <image class="hotel-image" :src="hotel.imageUrl" mode="aspectFill"></image>
        <view class="hotel-info">
          <view class="name-wrap">
            <text class="name">{{ hotel.name }}</text>
            <text class="distance">{{ randomDistance(index) }}km</text>
          </view>
          <view class="rating">
            <text class="score">{{ 4.5 + index * 0.1 }}分</text>
            <text class="comment">"{{ hotel.description }}"</text>
          </view>
          <view class="tags">
            <text class="tag">{{ getHotelTag(index) }}</text>
            <text class="tag">{{ getHotelFeature(index) }}</text>
          </view>
          <view class="price-wrap">
            <view class="price">
              <text class="symbol">¥</text>
              <text class="number">{{ hotel.price }}</text>
              <text class="unit">起</text>
            </view>
            <text class="discount" v-if="index % 2 === 0">限时优惠</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>
    <view class="no-data" v-if="!loading && hotels.length === 0">
      <text>暂无酒店数据</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      hotels: [],
      loading: false,
      hotelTags: ['五星级', '四星级', '商务酒店', '度假酒店', '精品酒店'],
      hotelFeatures: ['游泳池', '健身房', '商务中心', '会议室', '亲子游']
    }
  },
  onLoad() {
    this.fetchHotels()
  },
  methods: {
    fetchHotels() {
      this.loading = true
      // 使用实际的API接口
      uni.request({
        url: 'http://localhost:9527/Video/api/video/getHotelList',
        method: 'GET',
        params:{
          searchKey:this.searchKey
        },
        success: (res) => {
          if (res.data && res.data.code === 200) {
            this.hotels = res.data.data
            console.log('酒店数据:', this.hotels)
          } else {
            uni.showToast({
              title: '获取酒店列表失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          console.error('请求失败:', err)
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          })
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    showFilter(type) {
      console.log('显示筛选:', type)
      // 实现筛选功能
      uni.showToast({
        title: `${type}筛选功能开发中`,
        icon: 'none'
      })
    },
    goToDetail(hotel) {
      uni.navigateTo({
        url: `/pages/hotel/detail?id=${hotel.hotelId}`
      })
    },
    randomDistance(index) {
      // 生成随机距离，仅用于演示
      return (1 + index * 0.8).toFixed(1)
    },
    getHotelTag(index) {
      return this.hotelTags[index % this.hotelTags.length]
    },
    getHotelFeature(index) {
      return this.hotelFeatures[index % this.hotelFeatures.length]
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f8f8f8;
}

.search-bar {
  display: flex;
  align-items: center;
  margin: 20rpx;
  padding: 0 30rpx;
  height: 72rpx;
  background: #fff;
  border-radius: 36rpx;
  
  .iconfont {
    font-size: 32rpx;
    color: #999;
    margin-right: 10rpx;
  }
  
  input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
  }
}

.filter-bar {
  display: flex;
  background: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  
  .filter-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    
    .iconfont {
      font-size: 24rpx;
      color: #999;
      margin-left: 6rpx;
    }
  }
}

.hotel-list {
  padding: 0 20rpx;
  
  .hotel-item {
    display: flex;
    padding: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    .hotel-image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .hotel-info {
      flex: 1;
      
      .name-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        
        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .distance {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .rating {
        margin-bottom: 16rpx;
        
        .score {
          font-size: 28rpx;
          color: #ff9500;
          font-weight: bold;
          margin-right: 10rpx;
        }
        
        .comment {
          font-size: 24rpx;
          color: #666;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
      
      .tags {
        margin-bottom: 16rpx;
        
        .tag {
          display: inline-block;
          padding: 4rpx 16rpx;
          font-size: 24rpx;
          color: #4080ff;
          background: rgba(64, 128, 255, 0.1);
          border-radius: 4rpx;
          margin-right: 16rpx;
        }
      }
      
      .price-wrap {
        display: flex;
        align-items: baseline;
        
        .price {
          margin-right: 16rpx;
          
          .symbol {
            font-size: 24rpx;
            color: #ff4d4f;
          }
          
          .number {
            font-size: 36rpx;
            font-weight: bold;
            color: #ff4d4f;
          }
          
          .unit {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .discount {
          font-size: 24rpx;
          color: #ff4d4f;
          background-color: rgba(255, 77, 79, 0.1);
          padding: 2rpx 10rpx;
          border-radius: 4rpx;
        }
      }
    }
  }
}

.loading, .no-data {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style> 